<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
<style type='text/css'>
body{background:#EEEEEE;}
</style>
</head>
<body>
<style type="text/css">
/*singleLeftRightChangeBut star*/
div.singleLeftRightChangeBut{width:150px; margin:30px auto 15px; overflow:hidden; text-align:center;}
div.singleLeftRightChangeBut a{display:block; width:45px; height:79px; line-height:79px; font-size:60px; font-weight:bold;  background:#ddd; color:#fff;}
div.singleLeftRightChangeBut a.singleLeftRightChangeLeft{float:left;}
div.singleLeftRightChangeBut a.singleLeftRightChangeRight{float:right;}
/*singleLeftRightChange end*/
div.singleLeftRightChange{width:1040px; height:200px; margin:20px auto;}
ul.singleLeftRightChange li{width:200px; height:200px; margin-right:10px;}
</style>
<div class="singleLeftRightChangeBut">
    <a href="javascript:;" class='singleLeftRightChangeLeft'>&lt;</a>
    <a href="javascript:;" class='singleLeftRightChangeRight'>&gt;</a>
</div>
<div class="singleLeftRightChange">
    <ul class="singleLeftRightChange">
        <li class='con' style="background:red;"></li>
        <li class='con' style="background:orange;"></li>
        <li class='con' style="background:yellow;"></li>
		<li class='con' style="background:green;"></li>
        <li class='con' style="background:cyan;"></li>
        <li class='con' style="background:blue;"></li>
    </ul>
</div>

<script type="text/javascript">
(function($){
    $.fn.extend({
        'singleLeftRightChange':function(options){
			var opts = $.extend({},singleLeftRightChange_defaluts,options);
			var $this  = $(this);
			var $thisAll = $this.find('*');
			$this.css({
				'width':'1000%',
				'overflow':'hidden'
			});
			$this.parent('div.singleLeftRightChange').css({
				'overflow':'hidden'
			});
			$this.find('li').css({
				'float':'left'
			});
			opts.rightOneDate = new Date();			
			opts.rightoneTime = opts.rightOneDate.getTime();
			opts.leftOneDate = new Date();
			opts.leftoneTime = opts.leftOneDate.getTime();
			opts.liSize = $this.find('li.con').size();
			opts.liWidth = $this.find('li.con').outerWidth(true);
			if(opts.liSize > opts.showsum){
				$(opts.rightBut).live('click',function(){
					opts.rightTwoDate = new Date();
					opts.rightTwoTime = opts.rightTwoDate.getTime();
					opts.RightAfterBeforTime = opts.rightTwoTime - opts.rightoneTime;
					if(opts.RightAfterBeforTime >= opts.animateTime){partCom();};
					opts.rightoneTime = opts.rightTwoTime;
				});
				$(opts.leftBut).live('click',function(){
					opts.leftTwoDate = new Date();
					opts.leftTwoTime = opts.leftTwoDate.getTime();
					opts.leftAfterBeforTime = opts.leftTwoTime - opts.leftoneTime;
					if(opts.leftAfterBeforTime >= opts.animateTime){
						opts.liLastChild = $this.find('li.con').eq(opts.liSize - 1);
						$this.prepend(opts.liLastChild);
						$this.find('li.con').eq(0).css('margin-left','-'+opts.liWidth+'px');
						$this.find('li.con').eq(0).stop(true,true).animate({'margin-left':'0px'},opts.animateTime);
					};
					opts.leftoneTime = opts.leftTwoTime;
				});
				function partCom(){
					$this.find('li.con').eq(0).stop(true,true).animate({'margin-left':'-'+opts.liWidth},opts.animateTime,function(){
						$(this).css('margin-left','0px');
						$this.append($(this));
					});
				};
				if(opts.autoplay){
					function autoPlay(){
						clearInterval(opts.timer);
						opts.timer = setInterval(function(){ partCom(); },opts.setIntervalTime);
					};
					autoPlay();			
					function clearIntervalFun(clearIntervalObj){
						$(clearIntervalObj).live('mouseover',function(){ clearInterval(opts.timer); });
						$(clearIntervalObj).live('mouseout',function(){	autoPlay();	});
					};
					clearIntervalFun($this);
					clearIntervalFun($thisAll);
					clearIntervalFun(opts.leftBut);
					clearIntervalFun(opts.rightBut);
				};
			};
		}
    });
	var singleLeftRightChange_defaluts = {
		liSize:'',
		liWidth:'',
		timer:null,
		showsum:5,
		autoplay:true,
		animateTime:1000,
		setIntervalTime:2000,
		rightOneDate:0,
		rightoneTime:0,
		rightTwoDate:0,
		rightTwoTime:0,
		RightAfterBeforTime:0,
		leftOneDate:0,
		leftoneTime:0,
		leftTwoDate:0,
		leftTwoTime:0,
		leftAfterBeforTime:0,
		liLastChild:'',
		leftBut:'',
		rightBut:''
	};
}(window.jQuery));
</script>
<script type="text/javascript">
$('ul.singleLeftRightChange').singleLeftRightChange({
    autoplay:true,
    showsum:5,
    animateTime:500,
    setIntervalTime:2000,
    leftBut:'a.singleLeftRightChangeLeft',
    rightBut:'a.singleLeftRightChangeRight'
});
</script>
</body>
</html>